<template>
  <el-row>
    <el-col :span="8">
      <el-card class="detail-card">
        <h1 class="title">详细产品</h1>
        <h4 style="margin-top: 0px; margin-bottom: 0px">产品号/品名：</h4>
        <el-input type="text" style="margin-top: 10px; margin-bottom: 10px" v-model="product_id"></el-input>
        <h4 style="margin-top: 0px; margin-bottom: 0px">品名：</h4>
        <el-input type="text" style="margin-top: 10px; margin-bottom: 10px" v-model="product_name"></el-input>
        <h4 style="margin-top: 0px; margin-bottom: 0px">规格/型号：</h4>
        <el-input type="text" style="margin-top: 10px; margin-bottom: 10px" v-model="product_class"></el-input>
        <h4 style="margin-top: 0px; margin-bottom: 0px">是否为组合产品：</h4>
        <el-input type="text" style="margin-top: 10px; margin-bottom: 10px" v-model="product_check"></el-input>
        <h4 style="margin-top: 0px; margin-bottom: 0px">产品状态：</h4>
        <el-input type="text" style="margin-top: 10px; margin-bottom: 10px" v-model="product_status"></el-input>
        <h4 style="margin-top: 0px; margin-bottom: 0px">组合产品信息：</h4>
        <el-input type="textarea" style="margin-top: 10px; margin-bottom: 10px" v-model="product_info"></el-input>
        <el-button type="primary" style="width:100%;margin-top: 10px" @click="dialogTableVisible = true">详细记录信息
        </el-button>
      </el-card>
      <el-dialog title="记录信息" :visible.sync="dialogTableVisible">
        <el-table :data="recordData">
          <el-table-column property="id" label="编号" width="50"></el-table-column>
          <el-table-column property="name" label="名称" width="150"></el-table-column>
          <el-table-column property="start" label="开始时间" width="100"></el-table-column>
          <el-table-column property="end" label="结束时间" width="100"></el-table-column>
          <el-table-column property="problem" label="问题" width="50"></el-table-column>
          <el-table-column property="result" label="状态" width="100"></el-table-column>
          <el-table-column property="employee" label="员工" width="100"></el-table-column>
        </el-table>
      </el-dialog>
    </el-col>
    <el-col :span="16">
      <div class="process">
        <el-card v-for="item in processData" :key="item.name" :body-style="{display: 'flex', padding: 0}"
                 @click.native="closeClear()">
          <i class="icon" :class="`el-icon-${item.icon}`" :style="{background: item.color}"></i>
          <div class="detail">
            <p class="dec">{{ item.name }}</p>
            <p class="num">工序{{ item.id }}</p>
          </div>
        </el-card>
        <el-dialog
            title="信息输入"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
          <el-form :model="form" ref="form">
            <el-form-item label="数据输入">
              <el-input v-model="form.data" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="showData()">确 定</el-button>
                </span>
        </el-dialog>
      </div>
      <el-card class="box-card">
        <div class="search">
          <h1 class="title">产品查询</h1>
          <el-input type="text" v-model="id" placeholder="请输入产品ID"></el-input>
          <el-button type="primary" style="width:100%;margin-top: 10px" @click="showInfo()">提交</el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
//import {getData} from "@/api";
import qs from 'qs';

export default {
  data() {
    return {
      tableData: [
        {
          name: '基板装配上板',
          date: '2023-10-29',
          issolved: '未完成'
        },
        {
          name: '烧写程序',
          date: '2023-10-29',
          issolved: '未完成'
        },
        {
          name: '基板调试',
          date: '2023-10-29',
          issolved: '未完成'
        },
        {
          name: '整机装配主板配件',
          date: '2023-10-29',
          issolved: '未完成'
        },
        {
          name: '整机调试',
          date: '2023-10-29',
          issolved: '未完成'
        }, {
          name: 'FQC检验',
          date: '2023-10-29',
          issolved: '未完成'
        }
      ],
      tableLabel: {
        name: '问题流程',
        date: '日期',
        issolved: '是否解决'
      },
      processData: [
        {
          id: 1,
          name: "基板装配上板",
          icon: "set-up",
          color: "#2ec7c9",
        },
        {
          id: 2,
          name: "烧写程序",
          icon: "edit",
          color: "#ffb980",
        },
        {
          id: 3,
          name: "基板调试",
          icon: "setting",
          color: "#5ab1ef",
        },
        {
          id: 4,
          name: "整机装配",
          icon: "circle-plus-outline",
          color: "#2ec7c9",
        },
        {
          id: 5,
          name: "整机调试",
          icon: "success",
          color: "#ffb980",
        },
        {
          id: 6,
          name: "FQC检验",
          icon: "document-checked",
          color: "#5ab1ef",
        },
        {
          id: 7,
          name: "包装入库",
          icon: "receiving",
          color: "#2ec7c9",
        },
        {
          id: 8,
          name: "出货",
          icon: "sold-out",
          color: "#ffb980",
        }
      ],
      recordData: [
        {
          id:'1',
          name:'基板装配上板',
          start:'2023-10-29',
          end:'2023-10-29',
          problem:'0',
          result:'已完成',
          employee:'张三'
        },
        {
          id:'2',
          name:'烧写程序',
          start:'2023-10-29',
          end:'2023-10-29',
          problem:'0',
          result:'已完成',
          employee:'张三'
        },
        {
          id:'3',
          name:'基板调试',
          start:'2023-10-29',
          end:'2023-10-29',
          problem:'0',
          result:'已完成',
          employee:'张三'
        },
        {
          id:'4',
          name:'整机装配',
          start:'2023-10-29',
          end:'2023-10-29',
          problem:'1',
          result:'未完成',
          employee:'张三'
        },
        {
          id:'5',
          name:'整机调试',
          start:'2023-10-29',
          end:'2023-10-29',
          problem:'0',
          result:'已完成',
          employee:'张三'
        }
      ],
      dialogTableVisible: false,
      dialogVisible: false,
      form: {
        data: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      id: '',
      name: '',
      token: '',
      product_id: '',
      product_name: '',
      product_class: '',
      product_check: '',
      product_info: '',
      product_status: '',
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    showData() {
      console.log(this.form.data);
      this.dialogVisible = false;
    },
    closeClear() {
      this.dialogVisible = true;
      // if (this.$refs.form !== undefined){
      //   this.$refs.form.resetFields();
      // }
      this.form.data = '';
    },
    checkGet() {
      this.$axios({
        method: 'get',
        url: 'http://5ef9223.r2.cpolar.cn/employee/index/',
        headers: {
          'Content-Type': "application/json;charset=UTF-8",
          'Authorization': this.token,
        }
      })
          .then(res => {
            if (res.data.code === 200) {
              this.product_id = res.data.data.id
              this.product_name = res.data.data.name
              this.product_class = res.data.data.item_code
            }
          })
    },
    showInfo() {
      let url = 'https://2b4b50b0.r2.cpolar.cn/employee/info/';
      this.$axios.get(url, {
        params: {
          product_item_code: this.id
        },
        headers: {
          'Content-Type': "application/json;charset=UTF-8",
          'Authorization': this.token,
        }
      })
          .then(res => {
            if (res.data.code === 200) {
              console.log(res.data);
              this.product_id = res.data.data.id
              this.product_name = res.data.data.name
              if (res.data.data.is_combination === false) {
                this.product_check = '否'
              } else {
                this.product_check = '是'
              }
              this.product_class = res.data.data.size
              this.product_info = res.data.data.description
              this.product_status = res.data.data.production_status
            }
          })

    }
  },
  created() {
    this.token = localStorage.getItem('token')
  }
}
</script>
<style lang="less" scoped>
.process {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .icon {
    width: 80px;
    height: 80px;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
    color: #ffffff;
  }

  .detail {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .dec {
      font-size: 30px;
      margin-bottom: 10px;
      line-height: 30px;
      height: 30px;
    }

    .num {
      font-size: 14px;
      color: #999999;
    }
  }

  .el-card {
    width: 48%;
    margin-bottom: 20px;
  }
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>